import { defineComponent, h, Ref, ref } from 'vue'
import { DataItemType, SearchFormType } from './types'
import {
  DataTableColumns,
  NButton,
  NCard,
  NDataTable,
  NForm,
  NFormItem,
  NInput,
  NSelect,
  NSpace,
  NTag,
  useMessage
} from 'naive-ui'
import { deleteMenu, getMenuList } from '@/service/modules/system-menu'
import styles from './index.module.scss'
import create from './create'
import edit from './edit'
import info from './info'

const menus = defineComponent({
  name: 'menus',
  components: {
    create,
    edit,
    info
  },
  setup() {
    // @ts-ignore
    const dataList: DataItemType[] = ref([])

    const pagination = ref({
      pageSize: 10,
      pageCount: 0,
      page: 1,
      showQuickJumper: true,
      pageSizes: [10, 30, 50],
      showSizePicker: true,
      loading: false,
      onUpdatePage: (page: number) => {
        pagination.value.page = page
        handleList()
      },
      onUpdatePageSize: (pageSize: number) => {
        pagination.value.pageSize = pageSize
        pagination.value.page = 1
        handleList()
      }
    })

    const searchForm: Ref<SearchFormType> = ref({
      menuName: '',
      status: undefined
    })

    // @ts-ignore
    const statusOptions: SelectOptionsType = ['启用', '禁用'].map(
      (item: string, index: number) => {
        return {
          label: item,
          value: index
        }
      }
    )

    const submit = function () {
      handleList()
    }

    const reset = function () {
      searchForm.value.menuName = ''
      searchForm.value.status = ''
    }

    const createColumns = ({
      editData,
      deleteData
    }: // infoData
    {
      editData: (rowData: DataItemType) => void
      deleteData: (rowData: DataItemType) => void
      infoData: (rowData: DataItemType) => void
    }): DataTableColumns<DataItemType> => {
      return [
        { title: '菜单名称', key: 'menuName' },
        { title: '路由地址', key: 'url' },
        { title: '路由参数', key: 'icon' },
        { title: '权限标识', key: 'perms' },
        {
          title: '状态',
          key: 'status',
          render(row: any) {
            return h(
              // @ts-ignore
              NTag,
              {
                type: row.status == 0 ? 'success' : 'error'
              },
              {
                default: () => (row.status == 0 ? '启用' : '禁用')
              }
            )
          }
        },
        { title: '创建人', key: 'createBy' },
        { title: '创建时间', key: 'createTime' },
        {
          title: '操作',
          key: 'operation',
          width: 240,
          render(row: any) {
            return h(
              NSpace,
              {},
              {
                default: () => {
                  return [
                    h(
                      NButton,
                      {
                        type: 'primary',
                        onClick: () => editData(row)
                      },
                      { default: () => '编辑' }
                    ),
                    // h(
                    //   NButton,
                    //   {
                    //     type: 'tertiary',
                    //     onClick: () => infoData(row)
                    //   },
                    //   { default: () => '查看' }
                    // ),
                    h(
                      NButton,
                      {
                        type: row.status == 0 ? 'error' : 'success',
                        onClick: () => deleteData(row)
                      },
                      { default: () => (row.status == 0 ? '禁用' : '启用') }
                    )
                  ]
                }
              }
            )
          }
        }
      ]
    }

    const message = useMessage()

    const handleList = function () {
      pagination.value.loading = true
      getMenuList(
        // @ts-ignore
        searchForm.value,
        pagination.value.page,
        pagination.value.pageSize
      )
        .then((res: any) => {
          // @ts-ignore
          dataList.value = res
          pagination.value.loading = false
        })
        .catch((err: any) => {
          message.error(err.msg ? err.msg : '接口未知错误')
          pagination.value.loading = false
        })
    }

    handleList()

    const createModal = ref(false)
    const editModal = ref(false)
    const infoModal = ref(false)

    const createClick = function () {
      createModal.value = true
    }

    const editClick = function () {
      editModal.value = true
    }

    const infoClick = function () {
      infoModal.value = true
    }

    const handleModal = function (refush = false) {
      createModal.value = false
      editModal.value = false
      infoModal.value = false
      if (refush) {
        handleList()
      }
    }

    const itemData = ref()

    type RowData = {
      name: string
      index: string
      menuName: string
      path: string
      query: string
      icon: string
      perms: string
      children?: RowData[]
      menuId: number
    }

    return {
      columns: createColumns({
        editData(rowData) {
          itemData.value = rowData
          editClick()
        },
        deleteData(rowData) {
          // @ts-ignore
          deleteMenu(rowData.menuId, rowData.status).then(() => {
            handleList()
          })
        },
        infoData(rowData) {
          itemData.value = rowData
          infoClick()
        }
      }),
      dataList,
      pagination,
      searchForm,
      statusOptions,
      submit,
      reset,
      message,
      createModal,
      createClick,
      handleModal,
      editModal,
      editClick,
      itemData,
      infoModal,
      infoClick,
      rowKey: (row: RowData) => row.menuId
    }
  },
  render() {
    return (
      <NSpace vertical>
        <NCard hoverable>
          <NForm
            label-width={'auto'}
            label-placement={'left'}
            model={this.searchForm}
            inline
          >
            <NFormItem label={'菜单名称'} path={'menuName'}>
              <NInput
                v-model:value={this.searchForm.menuName}
                placeholder={'请输入菜单名称'}
              ></NInput>
            </NFormItem>
            <NFormItem label={'状态'} path={'status'}>
              <NSelect
                class={styles['select-item']}
                v-model:value={this.searchForm.status}
                placeholder={'请选择状态'}
                // @ts-ignore
                options={this.statusOptions}
              ></NSelect>
            </NFormItem>
            <NFormItem>
              <NButton
                attr-type={'button'}
                type={'primary'}
                onClick={this.submit}
              >
                搜索
              </NButton>
            </NFormItem>
            <NFormItem>
              <NButton
                attr-type={'button'}
                type={'tertiary'}
                onClick={this.reset}
              >
                清空
              </NButton>
            </NFormItem>
          </NForm>
        </NCard>
        <NCard hoverable>
          <NCard bordered={false} size={'medium'}>
            <NButton
              attr-type={'button'}
              type={'primary'}
              onClick={this.createClick}
            >
              创建
            </NButton>
          </NCard>
          <NDataTable
            // @ts-ignore
            columns={this.columns}
            data={this.dataList}
            loading={this.pagination.loading}
            rowKey={this.rowKey}
          ></NDataTable>
          {/*<NPagination*/}
          {/*  class={styles['page-position']}*/}
          {/*  display-order={['quick-jumper', 'pages', 'size-picker']}*/}
          {/*  page-count={this.pagination.pageCount}*/}
          {/*  page-size={this.pagination.pageSize}*/}
          {/*  page-sizes={this.pagination.pageSizes}*/}
          {/*  page={this.pagination.page}*/}
          {/*  on-update:page={this.pagination.onUpdatePage}*/}
          {/*  on-update:page-size={this.pagination.onUpdatePageSize}*/}
          {/*  show-quick-jumper*/}
          {/*  show-size-picker*/}
          {/*></NPagination>*/}
        </NCard>
        <create
          propModal={this.createModal}
          onCloseModal={this.handleModal}
          close-modal={this.handleModal}
        ></create>
        <edit
          propModal={this.editModal}
          onCloseModal={this.handleModal}
          close-modal={this.handleModal}
          itemData={this.itemData}
        ></edit>
        <info
          propModal={this.infoModal}
          onCloseModal={this.handleModal}
          close-modal={this.handleModal}
        ></info>
      </NSpace>
    )
  }
})

export default menus
